<!--
 * @description: Emits Component Option 
 * @Author: lhr
 * @Date: 2020-12-02 19:14:14
 * @LastEditors: lhr
 * @LastEditTime: 2020-12-17 15:13:34
-->
<template>
  <p>校验$emit事件的参数</p>
  <div>
    <custom-list :list="data.list" @sure-ok="selectItem" @add="addTest"></custom-list>
  </div>
  <p>自定义输入框v-model</p>
  <div>
    <custom-input v-model:value="value"></custom-input>
  </div>
  <!-- <p>alert v-model</p>
  <div>
    <input type="text" v-model="value" />
    <button @click="showAlert">显示alert</button>
  </div>
  <custom-alert
    v-model:visible="showFlag"
    :text="alertText"
    @close="close"
  ></custom-alert> -->
</template>
<script>
import { ref, reactive } from "vue";
// import CustomAlert from "@/components/CustomAlert.vue";
import CustomInput from "@/components/CustomInput.vue";
import CustomList from "@/components/CustomList.vue";
export default {
  components: {
    // CustomAlert,
    CustomInput,
    CustomList,
  },
  setup() {
    let showFlag = ref(false);
    let alertText = ref("");
    let value = ref("");
    const data = reactive({
      list: [
        {
          id: 1,
          name: "张三1",
          sex: "男",
        },
        {
          id: 2,
          name: "张三2",
          sex: "男",
        },

        {
          id: 3,
          name: "张三3",
          sex: "男",
        },
        {
          id: 4,
          name: "张三4",
          sex: "男",
        },
        {
          id: 5,
          name: "张三5",
          sex: "男",
        },
      ],
    });

    // 点击显示alert按钮
    function showAlert() {
      if (value.value.trim().length === 0) {
        alert("请输入内容");
        return;
      }
      showFlag.value = true;
      alertText.value = value.value;
    }
    // 弹框关闭回调
    function close() {
      console.log("alert 关闭回调");
    }

    // 弹框选择点击确定
    function selectItem(id) {
      console.log(id);
    }

    function addTest(){
      console.log("addTest")
    }
    return {
      value,
      showFlag,
      alertText,
      data,
      showAlert,
      close,
      selectItem,
      addTest,
    };
  },
};
</script>
